<template>
  <div class="dashboard-editor-container">

    <!-- <panel-group :daili="tui" :qudao="qudao" :pv="pv" :uv="uv" :spend="spend" :history="history_spend" /> -->

    <el-row :gutter="20" style="margin-bottom: 32px">
      <!-- <el-col :lg="4" :xs="12" :sm="12">
        <el-select v-model="last" style="width: 100%" class="filter-item" @change="getLineData">
          <el-option v-for="item in sortOptions1" :key="item.key" :label="item.label" :value="item.key" />
        </el-select>
      </el-col> -->
      <el-col :lg="4" :xs="12" :sm="12">
        <el-select v-model="listQuery.channel" style="width: 100%" filterable class="filter-item" @change="getLineData">
          <el-option key="" label="所有站长" value="" />
          <el-option v-for="(value) in qudaoArr" :key="value" :label="value" :value="value" />
        </el-select>
      </el-col>
    </el-row>

    <el-row style="background:#fff;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" class="chart-wrapper" />
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import {lineData30 } from '@/api/cnzz/dashboard'
import { Message } from 'element-ui'
import {
  realDataInfo,
  getChartData,
  getAdvChartData,
  getProxyNameList,
  getChannelNameList,
} from "@/api/admin/admin";

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart
  },
  data() {
    return {
      tui: 0,
      qudao: 0,
      pv: 0,
      uv: 0,
      spend: 0,
      history_spend: 0,
      qudaoArr: [],
      lineChartData: {
        data: [15, 16, 3, 161, 134, 105, 160],
        ip: [100, 120, 161, 134, 105, 160, 165],
        uv: [120, 82, 91, 154, 162, 140, 145],
        adv_click: [120, 82, 91, 154, 162, 140, 145]
      },
      last: 24,
      listQuery: {
        channel: ''
      },
      sortOptions1: [{ label: '最近30天', key: 30 }]
    }
  },
  created(){
    //获取渠道列表
    this.getChannelNameList();
    // 获取图标数据
    this.getLineData()
  },
  mounted: function() {
    
  },
  methods: {
   //获取渠道列表
    getChannelNameList() {
      getChannelNameList().then((r) => {
        this.qudaoArr = r.DATA;
      });
    },
    // 获取图标数据
    getLineData() {
      lineData30(this.listQuery).then(r => {
          r.DATA.date = r.DATA.date ? r.DATA.date.reverse() : [];
          r.DATA.uv = r.DATA.uv ? r.DATA.uv.reverse() : [];
          r.DATA.pv = r.DATA.pv ? r.DATA.pv.reverse() : [];
          r.DATA.ip = r.DATA.ip ? r.DATA.ip.reverse() : [];
          r.DATA.adv_click = r.DATA.adv_click ? r.DATA.adv_click.reverse() : [];
          this.lineChartData = r.DATA;
      })
    
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(255, 255, 255);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    // border: 1px #ddd solid;
    // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    box-shadow: 4px 4px 20px #DEDDE5;

    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
